<!-- <template>
  <div class="right-top-container">
    <div class="time-switch">
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'year' }" 
        @click="switchTimeType('year')"
      >
        年
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'month' }" 
        @click="switchTimeType('month')"
      >
        月
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'day' }" 
        @click="switchTimeType('day')"
      >
        日
      </div>
    </div>
    
    <div class="chart-container">
      <v-chart class="chart" :option="chartOption" v-if="JSON.stringify(chartOption) !== '{}'" height="100%" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { graphic } from 'echarts/core'
import { GreenPowerApi } from '@/api/green-power'
import type { TopNavStatsData } from '@/api/green-power'

const activeTimeType = ref('day')
const chartOption = ref({})

// 模拟数据
const mockData = reactive({
  year: {
    xData: ['华北', '华东', '华南', '华中', '西北', '东北'],
    yData: [4800, 5200, 3600, 4100, 2800, 2200]
  },
  month: {
    xData: ['华北', '华东', '华南', '华中', '西北', '东北', '西南'],
    yData: [420, 480, 320, 380, 260, 200, 340]
  },
  day: {
    xData: ['区域A', '区域B', '区域C', '区域D', '区域E', '区域F'],
    yData: [15, 18, 12, 16, 9, 7]
  }
})

const switchTimeType = (type: string) => {
  activeTimeType.value = type
  updateChart()
}

const updateChart = () => {
  const currentData = mockData[activeTimeType.value as keyof typeof mockData]
  
  chartOption.value = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(124, 189, 207, 0.8)',
      textStyle: {
        color: '#ffffff'
      },
      formatter: function(params: any) {
        const unit = activeTimeType.value === 'year' ? 'GWh' : activeTimeType.value === 'month' ? 'MWh' : 'kWh'
        return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}${unit}`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: currentData.xData,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#7EB7FD',
        fontSize: 12,
        rotate: activeTimeType.value === 'month' ? 45 : 0
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: `弃电利用量(${activeTimeType.value === 'year' ? 'GWh' : activeTimeType.value === 'month' ? 'MWh' : 'kWh'})`,
      nameTextStyle: {
        color: '#7EB7FD',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#7EB7FD',
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(31, 99, 163, 0.2)'
        }
      }
    },
    series: [
      {
        name: '区域弃电利用量',
        type: 'bar',
        data: currentData.yData,
        barWidth: '50%',
        itemStyle: {
          color: function(params: any) {
            // 根据数值大小设置不同颜色
            const colors = [
              ['#FF6B6B', '#FF8E8E'],
              ['#4ECDC4', '#7FDBDA'],
              ['#45B7D1', '#74C7EC'],
              ['#96CEB4', '#B8E6C1'],
              ['#FECA57', '#FFD93D'],
              ['#A8E6CF', '#C8F7C5'],
              ['#FFB6C1', '#FFC0CB']
            ]
            const colorPair = colors[params.dataIndex % colors.length]
            return new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorPair[0]
              },
              {
                offset: 1,
                color: colorPair[1]
              }
            ])
          },
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 212, 255, 0.5)'
          }
        }
      }
    ]
  }
}
const timer = ref()
onMounted( async () => {
  await nextTick(()=>{
    timer.value = setTimeout(()=>{
      updateChart()
      clearTimeout(timer.value)
    },1000)
  })
})
</script>

<style lang="less" scoped>
.right-top-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.time-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  background: rgba(0, 30, 60, 0.6);
  border-radius: 20px;
  padding: 4px;
  
  .switch-btn {
    padding: 6px 16px;
    margin: 0 2px;
    border-radius: 16px;
    color: #7EB7FD;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(0, 212, 255, 0.2);
      color: #00d4ff;
    }
    
    &.active {
      background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
    }
  }
}

.chart-container {
  flex: 1;
  
  .chart {
    width: 100%;
    height: 100%;
    :deep(.vue-echarts-inner){
      div:nth-child(1){
        height: 100% !important;
      }
    } 
  }
}

</style> -->

<template>
    <div class="left-bottom-container">
        <!-- 时间切换按钮 -->
        <!-- <div class="time-switch">
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'year' }" 
        @click="switchTimeType('year')"
      >
        年
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'month' }" 
        @click="switchTimeType('month')"
      >
        月
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'day' }" 
        @click="switchTimeType('day')"
      >
        日
      </div>
    </div> -->

        <!-- 图表区域 -->
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption" v-if="JSON.stringify(chartOption) !== '{}'" />
        </div>
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption2" v-if="JSON.stringify(chartOption2) !== '{}'" />
        </div>
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption3" v-if="JSON.stringify(chartOption3) !== '{}'" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { graphic } from 'echarts/core'

const activeTimeType = ref('day')
const chartOption = ref({})
const chartOption2 = ref({})
const chartOption3 = ref({})

// 响应式数据
const loading = ref(false)
const topNavStatsData = ref<TopNavStatsData | null>(null)

// 模拟数据
const mockData = reactive({
    year: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yData: [45, 67, 89, 34, 78, 91, 23, 56, 88, 44, 77, 95]
    },
    month: {
        xData: ['01日', '02日', '03日', '04日', '05日', '06日', '07日', '08日', '09日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
        yData: [85, 78, 92, 89, 95, 97, 94, 96, 91, 88, 82, 79, 85, 78, 92, 89, 95, 97, 94, 96, 91, 88, 82, 79, 85, 78, 92, 89, 95, 97]
    },
    day: {
        xData: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        yData: [45, 67, 89, 34, 78, 91, 23, 56, 88, 44, 77, 95, 32, 65, 83, 41, 79, 93, 28, 61, 87, 39, 72, 94]
    }
})

// 获取顶部导航统计数据
const fetchTopNavStatsData = async () => {
    try {
        loading.value = true
        const response = await GreenPowerApi.getTopNavStats()
        if (response.code === 200 && response.data) {
            topNavStatsData.value = response.data
        } else {
            console.warn('获取顶部导航统计数据失败，使用备用数据')
            useBackupData()
        }
    } catch (error) {
        console.error('获取顶部导航统计数据失败:', error)
        useBackupData()
    } finally {
        loading.value = false
    }
}

// 使用备用数据
const useBackupData = () => {
    // 使用原有的模拟数据更新图表
    updateChart()
}

// 切换时间类型
const switchTimeType = (type: string) => {
    activeTimeType.value = type
    updateChart()
}

const updateChart = () => {
    // 优先使用接口数据，如果为空则使用模拟数据
    let data
    if (topNavStatsData.value && topNavStatsData.value[activeTimeType.value]) {
        data = topNavStatsData.value[activeTimeType.value]
    } else {
        data = mockData['year']
    }
    const currentData = data
    // 柱状图数据
    chartOption.value = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: 'rgba(124, 189, 207, 0.8)',
            textStyle: {
                color: '#ffffff'
            },
            formatter: function (params: any) {
                return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}KWh`
            }
        },
        grid: {
            left: '4%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: currentData.xData,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisLabel: {
                color: '#7EB7FD',
                fontSize: 12
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '弃电利用量(KWh)',
            nameTextStyle: {
                color: '#7EB7FD',
                fontSize: 12,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisLabel: {
                color: '#7EB7FD',
                fontSize: 12
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.2)'
                }
            }
        },
        series: [
            {
                name: '弃电利用量(KWh)',
                type: 'bar',
                data: currentData.yData,
                barWidth: '30%',
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#7CBDCF'
                        },
                        {
                            offset: 1,
                            color: '#72A7F5'
                        }
                    ]),
                    // color: new graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: '#7CBDCF'
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: '#5287DE'
                    //   }
                    // ]),
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#9DD4E6'
                            },
                            {
                                offset: 1,
                                color: '#72A7F5'
                            }
                        ])
                    }
                }
            }
        ]
    }
    // 折线图数据
    // chartOption.value = {
    //   tooltip: {
    //     trigger: 'axis',
    //     backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //     borderColor: 'rgba(124, 189, 207, 0.8)',
    //     textStyle: {
    //       color: '#ffffff'
    //     },
    //     formatter: function(params: any) {
    //       return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}kWh`
    //     }
    //   },
    //   grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%',
    //     top: '15%',
    //     containLabel: true
    //   },
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: currentData.xData,
    //     axisLine: {
    //       lineStyle: {
    //         color: 'rgba(255, 255, 255, 0.3)'
    //       }
    //     },
    //     axisLabel: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     splitLine: {
    //       show: true,
    //       lineStyle: {
    //         color: 'rgba(31, 99, 163, 0.2)'
    //       }
    //     }
    //   },
    //   yAxis: {
    //     type: 'value',
    //     name: '弃电利用量(kWh)',
    //     nameTextStyle: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     axisLine: {
    //       lineStyle: {
    //         color: 'rgba(255, 255, 255, 0.3)'
    //       }
    //     },
    //     axisLabel: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     splitLine: {
    //       show: true,
    //       lineStyle: {
    //         color: 'rgba(31, 99, 163, 0.2)'
    //       }
    //     }
    //   },
    //   series: [
    //     {
    //       name: '弃电利用量',
    //       type: 'line',
    //       smooth: true,
    //       symbol: 'circle',
    //       symbolSize: 6,
    //       data: currentData.yData,
    //       lineStyle: {
    //         color: '#00d4ff',
    //         width: 3
    //       },
    //       itemStyle: {
    //         color: '#00d4ff',
    //         shadowColor: '#00d4ff',
    //         shadowBlur: 10
    //       },
    //       areaStyle: {
    //         color: new graphic.LinearGradient(0, 0, 0, 1, [
    //           {
    //             offset: 0,
    //             color: 'rgba(0, 212, 255, 0.6)'
    //           },
    //           {
    //             offset: 1,
    //             color: 'rgba(0, 212, 255, 0.1)'
    //           }
    //         ])
    //       }
    //     }
    //   ]
    // }
    // 优先使用接口数据，如果为空则使用模拟数据
    let data2
    if (topNavStatsData.value && topNavStatsData.value['month']) {
        data2 = topNavStatsData.value['month']
    } else {
        data2 = mockData['month']
    }
    const currentData2 = data2
    // 柱状图数据
    // chartOption2.value = {
    //     tooltip: {
    //         trigger: 'axis',
    //         backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //         borderColor: 'rgba(124, 189, 207, 0.8)',
    //         textStyle: {
    //             color: '#ffffff'
    //         },
    //         formatter: function (params: any) {
    //             return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}KWh`
    //         }
    //     },
    //     grid: {
    //         left: '4%',
    //         right: '4%',
    //         bottom: '3%',
    //         top: '15%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: data2.xData,
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: false
    //         }
    //     },
    //     yAxis: {
    //         type: 'value',
    //         name: '弃电利用量(KWh)',
    //         nameTextStyle: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: 'rgba(31, 99, 163, 0.2)'
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: '弃电利用量(KWh)',
    //             type: 'bar',
    //             data: data2.yData,
    //             barWidth: '60%',
    //             itemStyle: {
    //                 color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                     {
    //                         offset: 0,
    //                         color: '#7CBDCF'
    //                     },
    //                     {
    //                         offset: 1,
    //                         color: '#72A7F5'
    //                     }
    //                 ]),
    //                 borderRadius: [4, 4, 0, 0]
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: '#9DD4E6'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: '#72A7F5'
    //                         }
    //                     ])
    //                 }
    //             }
    //         }
    //     ]
    // }
    // 折线图数据
    chartOption2.value = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(124, 189, 207, 0.8)',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params: any) {
          return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}kWh`
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: currentData2.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '弃电利用量(kWh)',
        nameTextStyle: {
          color: '#7EB7FD',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      series: [
        {
          name: '弃电利用量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: currentData2.yData,
          lineStyle: {
            color: '#00d4ff',
            width: 3
          },
          itemStyle: {
            color: '#00d4ff',
            shadowColor: '#00d4ff',
            shadowBlur: 10
          },
          areaStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 212, 255, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 255, 0.1)'
              }
            ])
          }
        }
      ]
    }
    // 优先使用接口数据，如果为空则使用模拟数据
    let data3
    if (topNavStatsData.value && topNavStatsData.value['day']) {
        data3 = topNavStatsData.value['day']
    } else {
        data3 = mockData['day']
    }
    const currentData3 = data3
    // 柱状图数据
    // chartOption3.value = {
    //     tooltip: {
    //         trigger: 'axis',
    //         backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //         borderColor: 'rgba(124, 189, 207, 0.8)',
    //         textStyle: {
    //             color: '#ffffff'
    //         },
    //         formatter: function (params: any) {
    //             return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}KWh`
    //         }
    //     },
    //     grid: {
    //         left: '4%',
    //         right: '4%',
    //         bottom: '3%',
    //         top: '15%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: data3.xData,
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: false
    //         }
    //     },
    //     yAxis: {
    //         type: 'value',
    //         name: '弃电利用量(KWh)',
    //         nameTextStyle: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: 'rgba(31, 99, 163, 0.2)'
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: '弃电利用量(KWh)',
    //             type: 'bar',
    //             data: data3.yData,
    //             barWidth: '60%',
    //             itemStyle: {
    //                 // color: function(params: any) {
    //                 //   // 根据数值大小设置不同颜色
    //                 //   const colors = [
    //                 //     ['#FF6B6B', '#FF8E8E'],
    //                 //     ['#4ECDC4', '#7FDBDA'],
    //                 //     ['#45B7D1', '#74C7EC'],
    //                 //     ['#96CEB4', '#B8E6C1'],
    //                 //     ['#FECA57', '#FFD93D'],
    //                 //     ['#A8E6CF', '#C8F7C5'],
    //                 //     ['#FFB6C1', '#FFC0CB']
    //                 //   ]
    //                 //   const colorPair = colors[params.dataIndex % colors.length]
    //                 //   return new graphic.LinearGradient(0, 0, 0, 1, [
    //                 //     {
    //                 //       offset: 0,
    //                 //       color: colorPair[0]
    //                 //     },
    //                 //     {
    //                 //       offset: 1,
    //                 //       color: colorPair[1]
    //                 //     }
    //                 //   ])
    //                 // },
    //                 color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                     {
    //                         offset: 0,
    //                         color: '#7CBDCF'
    //                     },
    //                     {
    //                         offset: 1,
    //                         color: '#72A7F5'
    //                     }
    //                 ]),
    //                 borderRadius: [4, 4, 0, 0]
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: '#9DD4E6'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: '#72A7F5'
    //                         }
    //                     ])
    //                 }
    //             }
    //         }
    //     ]
    // }
    // 折线图数据
    chartOption3.value = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(124, 189, 207, 0.8)',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params: any) {
          return `${params[0].name}<br/>${params[0].marker}弃电利用量: ${params[0].value}kWh`
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: currentData3.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '弃电利用量(kWh)',
        nameTextStyle: {
          color: '#7EB7FD',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      series: [
        {
          name: '弃电利用量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: currentData3.yData,
          lineStyle: {
            color: '#00d4ff',
            width: 3
          },
          itemStyle: {
            color: '#00d4ff',
            shadowColor: '#00d4ff',
            shadowBlur: 10
          },
          areaStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 212, 255, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 255, 0.1)'
              }
            ])
          }
        }
      ]
    }
}
const timer = ref()
onMounted(async () => {
    // 首先获取接口数据
    // await fetchTopNavStatsData()
    
    await nextTick(() => {
        timer.value = setTimeout(() => {
            // 如果接口数据为空，使用备用数据
            if (!topNavStatsData.value) {
                updateChart()
            }
            clearTimeout(timer.value)
        }, 1000)
    })
})
</script>

<style lang="less" scoped>
.left-bottom-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.time-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    background: rgba(0, 30, 60, 0.6);
    border-radius: 20px;
    padding: 4px;

    .switch-btn {
        padding: 6px 16px;
        margin: 0 2px;
        border-radius: 16px;
        color: #7EB7FD;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(0, 212, 255, 0.2);
            color: #00d4ff;
        }

        &.active {
            background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
        }
    }
}

.chart-container {
    flex: 1;

    .chart {
        width: 100%;
        // min-height: 300px;
        height: 100%;

        :deep(.vue-echarts-inner) {
            div:nth-child(1) {
                height: 100% !important;
            }
        }
    }
}
</style>